<template>
  <div class="box">
    <Head text="英雄详情" tigt="1" />
    <div>
      <p>英雄名字：{{ school.roleName }}</p>
      <span>英雄属性</span><span v-html="school.roleSeries"></span>
      <span>英雄图片:</span><img :src="school.roleThumbnail" alt="" />
      <p>英雄id：{{ school.role_id }}</p>
      <p>英雄技能：</p>
      <div v-for="(value, index) in school.roleSkills" :key="index">
        <p class="qh" v-if="zindex == index" @click="dian">{{ value }}(点击切换)</p>
      </div>
    </div>
  </div>
</template>


<script>
import Head from "@/components/Head.vue";

export default {
  name: "RoleDetail",
  components: {
    Head,
  },
  methods: {
    dian() {
      this.zindex++;
      if (this.zindex == this.school.roleSkills.length) {
        this.zindex = 0;
      }
    },
  },
  data() {
    return {
      school: this.$route.params.data,
      zindex: 0,
    };
  },
  created() {
    if (this.school == undefined) {
      alert("英雄选择信息出错，点击确定重新获取");
      this.$router.push("/");
    }
  },
};
</script>

<style lang="scss" scoped>
@import "./RoleDetail.scss";
</style>